<template>
	<div class="attr">
		<el-card class="box-card">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="一级分类">
					<el-select v-model="formInline.one" placeholder="请选择">
						<el-option
							:label="item.name"
							:value="item.id"
							v-for="item in categoryFirstList"
							:key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="二级分类">
					<el-select
						v-model="formInline.two"
						placeholder="请选择"
						:disabled="formInline.one === ''">
						<el-option
							:label="item.name"
							:value="item.id"
							v-for="item in categoryTwoList"
							:key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="三级分类">
					<el-select
						v-model="formInline.three"
						placeholder="请选择"
						:disabled="formInline.two === ''">
						<el-option
							:label="item.name"
							:value="item.id"
							v-for="item in categoryThreeList"
							:key="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-card>
		<Attr
			:tableData="tableData"
			:loading="loading"
			:three="formInline.three"
			@deleteAttr="deleteAttr"
			@saveAttr="saveAttr"
			@showInput="showInput"
			@addAttr="addAttr"
			@addBrandAttr="addBrandAttr"
			@changData="changData" />
	</div>
</template>

<script>
import { getCategoryFirst, getCategoryTwo, getCategoryThree, getAttrInfoList } from '@/api/product';
import Attr from './components/Attr';
export default {
	name: 'ProductAttr',
	data() {
		return {
			tableData: [],
			formInline: {
				one: '',
				two: '',
				three: '',
			},
			categoryFirstList: [],
			categoryTwoList: [],
			categoryThreeList: [],
			isOK: false, // 是否可以请求数据展示数据
			loading: false, // 请求数据是否加载中
		};
	},
	components: { Attr },
	watch: {
		// 监视一级分类请求二级分类
		'formInline.one'(newVal) {
			getCategoryTwo(newVal).then(data => {
				this.categoryTwoList = data.data.data;
			});
		},
		// 监视二级分类请求三级分类
		'formInline.two'(newVal) {
			getCategoryThree(newVal).then(data => {
				this.categoryThreeList = data.data.data;
			});
		},
		// 分类填写完整展示数据
		formInline: {
			deep: true,
			handler(newVal) {
				this.isOk = true;
				this.loading = true;
				Object.values(newVal).forEach(value => {
					if (!value) return (this.isOk = false);
				});
				if (this.isOk) {
					let { one, two, three } = this.formInline;
					getAttrInfoList(one, two, three).then(data => {
						data.data.data.forEach(item => {
							item.isShowSave = false;
							item.isShowInput = false;
						});
						this.tableData = data.data.data;
						this.loading = false;
					});
				}
			},
		},
	},
	methods: {
		// 删除标签
		deleteAttr(listId, id) {
			this.tableData.forEach(e => {
				if (e.id === listId) {
					e.isShowSave = true;
					e.attrValueList.forEach((item, index) => {
						if (item.id === id) {
							e.attrValueList.splice(index, 1);
						}
					});
				}
			});
		},
		// 保存
		saveAttr(id) {
			this.tableData.forEach(e => {
				if (e.id === id) {
					e.isShowSave = false;
				}
			});
		},
		// 显示或移除输入框
		showInput(id, boolean) {
			this.tableData.forEach(item => {
				if (item.id === id) {
					item.isShowInput = boolean;
				}
			});
		},
		// 添加属性
		addAttr(id, val) {
			this.tableData.forEach(e => {
				if (e.id === id) {
					e.isShowSave = true;
					e.attrValueList.push({
						attrId: Date.now(),
						id: Date.now() + 1,
						valueName: val,
					});
				}
			});
		},
		// 显示添加品牌输入框
		addBrandAttr() {
			this.tableData.push({
				attrName: '',
				attrValueList: [],
				id: Date.now(),
				categoryId: this.formInline.three,
				categoryLevel: 3,
				isShowInput: false,
				isShowSave: true,
			});
		},
		// 添加品牌失去焦点后更新数据
		changData(id, val) {
			this.tableData.forEach(e => {
				if (e.id === id) {
					e.attrName = val;
				}
			});
		},
	},
	created() {
		getCategoryFirst().then(data => {
			this.categoryFirstList = data.data.data;
		});
	},
};
</script>

<style lang="less">
.box-card {
	&:last-child {
		margin-top: 20px;
	}
}
</style>
